<template>
  <table>
    <tr>
      <td>
        <el-card style="width: 280px">
          <tr>
            <p style="font-size: x-large">
              {{ infor.rencount }} <span style="margin-left: 100px">入职人数</span>
            </p>
          </tr>
          <hr style="margin-top: 10px" />
          <tr>
            <p style="margin-top: 10px">查看详情</p>
          </tr>
        </el-card>
      </td>

      <td>
        <el-card style="width: 280px; margin-left: 50px">
          <tr>
            <p style="font-size: x-large">
              {{ infor.separationCount }} <span style="margin-left: 100px">离职人数</span>
            </p>
          </tr>
          <hr style="margin-top: 10px" />
          <tr>
            <p style="margin-top: 10px">查看详情</p>
          </tr>
        </el-card>
      </td>

      <td>
        <el-card
          style="
            width: 280px;
            margin-left: 50px;
            text-align: center;
            background-color: cornflowerblue;
          "
        >
          <tr style="color: aliceblue; font-size: xx-large">
            {{
              infor.employees
            }}
          </tr>
          <tr style="color: aliceblue; font-size: large">
            员工总人数
          </tr>
        </el-card>
      </td>
    </tr>
    <tr>
      <!-- 员工年龄比 -->
      <td>
        <vue-echarts style="height: 300px; width: 400px" :option="option1"></vue-echarts>
      </td>
      <!-- 工龄比 -->
      <td>
        <vue-echarts style="height: 300px; width: 400px" :option="option2"></vue-echarts>
      </td>
    </tr>
    <tr>
      <!-- 部门人数 -->
      <td>
        <vue-echarts style="height: 300px; width: 400px" :option="option3"></vue-echarts>
      </td>
      <!-- 离职人数 -->
      <td>
        <vue-echarts style="height: 300px; width: 400px" :option="option4"></vue-echarts>
      </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
// 引入Echarts
import "echarts";
import VueEcharts from "vue-echarts";
import axios from "axios";
onMounted(() => {
  GetEntryCount();
  GetPersonnel();
  GetResignCount();
  GetEmplyoo();
  GetDepartmentCount();
  GetResignShow();
  GetSeniority();
});
const infor = ref({
  rencount: 0,
  separationCount: 0,
  employees: 0,
});
const GetEmplyoo = () => {
  axios({
    method: "get",
    url: "empread/api/Employee/EmployeeShowCount",
  }).then((res) => {
    infor.value.employees = res.data.data;
  });
};
//本月入职人数
const GetEntryCount = () => {
  axios({
    method: "get",
    url: "empread/api/Entry/GetEntryCount",
  }).then((res) => {
    infor.value.rencount = res.data.data;
  });
};
//本月离职人数
const GetResignCount = () => {
  axios({
    method: "get",
    url: "empread/api/Resign/GetResignCount",
  }).then((res) => {
    infor.value.separationCount = res.data.data;
  });
};
//每月离职人数
const tableResign = ref([]);
const GetResignShow = () => {
  axios({
    method: "get",
    url: "empread/api/Echarts/GetResignShow",
  }).then((res) => {
    tableResign.value = res.data.data;
    console.log(res.data.data);
    console.log(tableResign.value);
    let nameArray: string[] = [];
    let throryArray: number[] = [];
    tableResign.value.forEach((x) => {
      nameArray.push(x.monthName);
      throryArray.push(x.count);
    });
    console.log(nameArray);
    console.log(throryArray);
    option4.value = {
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: nameArray,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          data: throryArray,
        },
      ],
    };
  });
};
//各部门人数
const tableepartmentCount = ref([]);
const nameArray = ref([]);
const countArray = ref([]);
const GetDepartmentCount = () => {
  axios({
    method: "get",
    url: "empread/api/Employee/GetDepartmentCount",
  }).then((res) => {
    tableepartmentCount.value = res.data.data;

    tableepartmentCount.value.forEach((x) => {
      nameArray.value.push(x.name);
      countArray.value.push(x.count);
    });
  });
  console.log(nameArray);
  console.log(countArray);
  option3.value.xAxis[0].data = nameArray.value;
  option3.value.series[0].data = countArray.value;
};
const option3 = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "Direct",
      type: "bar",
      barWidth: "60%",
      data: [],
    },
  ],
});
//工龄
const tableSeniority = ref([]);
const GetSeniority = () => {
  axios({
    method: "get",
    url: "empread/api/Echarts/GetSeniority",
  }).then((res) => {
    tableSeniority.value = res.data.data;

    let bingTheoryArray: { value: number; name: string }[] = [];
    tableSeniority.value.forEach((x) => {
      bingTheoryArray.push({ value: x.percentage, name: x.seniority });
    });
    console.log(bingTheoryArray);
    option2.value = {
      title: {
        text: "工龄比",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },

      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: bingTheoryArray,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
  });
};
//各个年段人数
const tableAge = ref([]);
const GetPersonnel = () => {
  axios({
    method: "get",
    url: "empread/api/Echarts/GetAge",
  }).then((res) => {
    tableAge.value = res.data.data;
    let nameArray: string[] = [];
    let throryArray: number[] = [];
    tableAge.value.forEach((x) => {
      nameArray.push(x.ageRange);
      throryArray.push(x.count);
    });
    option1.value = {
      title: {
        text: "员工年龄比",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: "category",
        data: nameArray,
      },
      series: [
        {
          type: "bar",
          data: throryArray,
        },
      ],
    };
  });
};
const option1 = ref({});
const option2 = ref({});
// const option3 = ref({})
const option4 = ref({});
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
